<template>
  <div class="s-online-view-latest">
    <div class="s-module-title">
      <h2>在线看最新发布~</h2>
      <router-link to="/guanhua">更多</router-link>

    </div>
    <el-row :gutter="20">
      <el-col :span="columns" v-for="post in formattedPosts" :key="post.id"> <!-- 这里的span设置为8表示 3列布局 -->
        <el-card class="s-post-card" shadow="hover">
          <a :href="post.link" target="_blank">
            <div class="s-post-module-thumb">
              <el-image :src="post.imageSrc" class="s-post-thumb" fit="cover"/>
              <div class="s-post-pay-type">
                <span>{{ post.level }}</span>
              </div>
            </div>
            <div class="s-post-info">
              <a :href="post.link">{{ post.title }}</a>
            </div>
          </a>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {posrsStore} from "@/stores/index.js";
import {rowStore} from "@/stores/row.js";

export default {
  data() {
    return {
      postsStore: rowStore(),
      columns: 6,
      showLoadMore: true,
      // cosplayLink: "/cosplay", // 确保链接命名唯一
    };
  },
  mounted() {
    this.handleResize(); // 初始化时调用一次
    this.loadData(); //
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    async loadData() {
      await this.fotersdeta();
      this.loadPosts();
    },
    loadPosts() {
      this.postsStore.loadpostsFromLocalStorage(); // 加载本地存储中的信息
    },
    handleResize() {
      const screenWidth = window.innerWidth;
      if (screenWidth <= 768) {
        this.columns = 10;
      } else {
        this.columns = 6;
      }
    },

    async fotersdeta() {
      try {
        const isSuccess = await this.postsStore.fetchUserInfo();
        console.log(isSuccess, 8);
      } catch (error) {
        console.error('Failed to fetch user info:', error);
      }
    },

  },
  computed: {
    formattedPosts() {
      const items = this.postsStore.danji;
      return items.map(item => {
        return {
          imageSrc: item.imageSrc, // 获取第一条图片 URL
          title: item.title,
          link: "/detail/" + item.id,
          id: item.id,
          payType: item.payType,
          level: item.level,
          likes: item.likes,
          comments: item.comments,
          views: item.views,
          publishDate: item.publishDate,
        };
      });
    },
  }
};
</script>
<style scoped>
a {
  margin-top: 10px;
}
.s-post-card {
  margin-bottom: 20px;
}
@media (min-width: 1025px) {
  .s-online-view-latest {
    margin-top: 20px;
    padding: 10px 20px;
    max-width: 1350px;
    backdrop-filter: blur(1px) brightness(90%);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
  }

  .s-online-view-latest div {
    backdrop-filter: blur(1px) brightness(90%);
    background-color: rgba(255, 255, 255, 0);
  }

  .s-module-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .s-post-card {
    margin-bottom: 20px;
    width: 100%; /* 设置为100%以确保适应列的宽度 */
  }

  .s-post-thumb {
    width: 100%;
    height: 200px; /* 根据需要调整高度 */
    border-radius: 4px;
  }

  .s-post-pay-type {
    position: absolute;
    top: 10px;
    left: 10px;
  }

  .s-post-info {
    padding: 15px;
  }

  .s-post-info h3 {
    margin: 0;
    font-size: 18px;
    overflow: hidden; /* 确保溢出部分不再显示 */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制显示行数 */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis; /* 显示省略号 */
  }
}

@media (min-width: 425px) and (max-width: 668px) {

  .s-module-title {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
  }

  :deep(.el-col-10) {
    flex-grow: 1;
    max-width: 50%;
  }

  .el-row {
    /* box-sizing: border-box; */
    display: flex;
    flex-wrap: wrap;
    position: relative;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .s-post-module-thumb {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .s-post-info a  {
  display: inline-block; /* 允许块级样式 */
  width: 100%; /* 根据需要调整宽度 */
  max-width: 200px; /* 设置最大宽度 */
  overflow: hidden; /* 隐藏溢出部分 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 溢出部分用省略号表示 */
  color: rgba(157, 233, 245, 0.86); /* 链接的颜色（可自定义） */
  text-decoration: none; /* 去掉下划线（可自定义） */
  }

  .el-col {
    margin: 1rem 0;
  }

  .s-post-thumb {
    min-width: 183px;
    height: 200px;
    border-radius: 4px;
  }
}

@media (min-width: 320px) and (max-width: 425px) {
  .s-module-title{

    display: flex;
    justify-content: space-around;
    align-items: center;
  }
:deep(.el-col-10) {
    flex-grow: 1;
    max-width: 50%;
  }
  .s-post-info a  {
  display: inline-block; /* 允许块级样式 */
  width: 100%; /* 根据需要调整宽度 */
  max-width: 200px; /* 设置最大宽度 */
  overflow: hidden; /* 隐藏溢出部分 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 溢出部分用省略号表示 */
  color: rgba(157, 233, 245, 0.86); /* 链接的颜色（可自定义） */
  text-decoration: none; /* 去掉下划线（可自定义） */
  }

  .el-row {
    /* box-sizing: border-box; */
    display: flex;
    flex-wrap: wrap;
    position: relative;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .s-post-module-thumb {
    display: flex;
    justify-content: center;
    align-items: center;
  }
   .s-post-thumb {
    min-width: 133px;
    height: 200px;
    border-radius: 4px;
  }
}
</style>